<template>
<div class="workbench-planninglist">
  <div class="workbench-planninglist-content">
    <ul class="planninglist-table">
      <li v-for="(item, index) in linkPlan"
          :key="item._id"
          class="planninglist-li">
        <span class="planninglist-icon" :class="index === 0 ? 'overdue' : ''"></span>
        <el-row class="border-col">
          <div class="planninglist-time">
            <span class="planninglist-time-right">{{timeFormat1(item.createTime)}}</span>
          </div>
          <div class="planninglist-customer">
            <agent :id="item.userId" :isNum="false" :isCallDetail="true"></agent>
          </div>
          <div class="planninglist-remark" >
            联系计划相关内容：<span v-text="item.remark"></span>
          </div>
          <div style="float: left;margin-left: 15px;margin-top: 5px" class="search-log-btn" @click.stop="showLogDetail1(item._id)">{{$t('customer.showChangeLog')}}</div>
        </el-row>
      </li>
    </ul>
  </div>
  <div v-if="showLog" class="cust_info" v-bind:class="{ 'layout' : showLog, 'layin': !showLog}">
    <span class="el-icon-close" @click="close"></span>
    <div class="workbench-planninglist-content1">
      <ul class="planninglist-table">
        <li v-for="list in planningListNew" :key="list._id">
          <span class="planninglist-icon" v-bind:class="list.result.type"></span>
          <el-row class="border-col">
            <div class="planninglist-time planninglist-time1">
              <span class="planninglist-time-right">{{list.time}}</span>
            </div>
            <div class="planninglist-remark1" v-text="list.content">
            </div>
          </el-row>
        </li>
      </ul>
      <div v-show="planningListNew.length === 0" class="no-plan">{{$t('workbench.noPlan')}}</div>
    </div>
    <div v-show="isLoadMoreShow1" class="more-btn"><span @click.stop="loadMore1" style="line-height: 50px">{{$t('public.loadMore')}}</span></div>
  </div>
  <el-row v-if="isLoadMoreShow">
    <el-col class="next-page">
      <div class="btn" @click.stop="loadMore">
          <span>{{$t('public.loadMore')}}</span>
      </div>
    </el-col>
  </el-row>
</div>

</template>

<script>
  import showContactHistory from '@/components/public-modules/cust-tab-content/contact-plan/showContactHistory.js'
  export default {
    name: 'ShowContactPlanHistory',
    mixins: [showContactHistory]
  }
</script>

<style lang="stylus" scoped>
@import "../../../../../../assets/common.styl"
.btn
  cursor pointer
  color $cf-color1
  padding-left: 23px;
  .icon-shuaxin
    display inline-block
    span
      font-size 12px
      float right
      padding-left 5px
.next-page
  margin-top 15px
.workbench-planninglist-content
  height calc(100% - 48px)
  overflow auto
.workbench-planninglist-content li
  color $cf-gray3
  position relative
  line-height 16px
.planninglist-table
  padding  10px 15px 15px 20px
  font-size  12px
  line-height  16px
  li
    &:last-of-type
      .planninglist-icon:after
        content  ""
        width  0
        height  0
.planninglist-icon
  display  block
  width  11px
  height  11px
  border-radius  50%
  position  absolute
  float  left
  left -5px
  background $c-border2
  top 1px
  z-index 10
.today-action
  background-color #ccc
.overdue
  background-color $c-pink
.usable
  background-color #98cb5a
.planninglist-time-right
  width 100%
  padding-left 14px
  color $cf-gray4
  text-overflow ellipsis
  overflow hidden
  white-space nowrap
.planninglist-time
  box-sizing  border-box
  text-overflow ellipsis
  overflow hidden
  white-space nowrap
.planninglist-customer
  color $cf-gray0
  text-overflow ellipsis
  overflow hidden
  white-space nowrap
  margin 10px 0 0 14px
.planninglist-remark
  color $cf-gray4
  word-break break-all
  line-height 16px
  margin 10px 0 0 14px
.no-plan
  color $cf-gray3
  padding-left 20px
.planninglist-table
  .border-col
    border-left: 1px solid #e8e8e8
    min-height: 22px
  li:last-child
    .border-col
      border-left: none
.search-log-btn
  color $c-main
  cursor pointer
.layout
  transition transform 0.35s
  box-shadow 0 3px 6px rgba(0, 0, 0, .3)
  animation movelayout .4s
  @keyframes movelayout
    0%
      width 390px
    100%
      width 390px
.layin
  width:0px
  transition transform 0.35s
.cust_info
  width 390px
  position fixed
  z-index 1998
  right 0
  top 54px
  bottom 0
  background $cf-white
  overflow-y auto
  overflow-x hidden
  cursor auto
  .el-icon-close
    float right
    width 14px
    margin-right 20px
    font-size 14px
    color $cf-gray5
    line-height 40px
    cursor pointer
.planninglist-li
  .border-col
    padding-bottom 20px
.workbench-planninglist-content1
  overflow-y: auto;
  height: calc(100vh - 140px);
  width: 100%;
  .planninglist-table
    padding  10px 15px 15px 20px
    font-size  12px
    line-height  12px
    li
      color $cf-gray3
      position relative
      line-height 16px
      &:last-of-type
        .planninglist-icon:after
          content  ""
          width  0
          height  0
      .planninglist-icon
        display  block
        width  11px
        height  11px
        border-radius  50%
        position  absolute
        float  left
        left -5px
        z-index 2
        top 1px
      .planninglist-icon:after
        content  ""
        display  block
        position  absolute
        width  1px
        height  16px
        left  5px
        top  11px
      .today-action
        background-color #ccc
      .overdue
        background-color $c-pink
      .usable
        background-color #98cb5a
  .planninglist-time-right
    width 100%
    padding-left 22px
    color $cf-gray6
    text-overflow ellipsis
    overflow hidden
    white-space nowrap
    float left
  .no-plan
    color $cf-gray3
    padding-left 20px
  .planninglist-table
    .border-col
      border-left: 1px solid #e8e8e8
      padding-bottom 3px
      min-height: 29px
    li:last-child
      .border-col
        border-left: none
  .planninglist-time1
    width 160px
    padding-right  15px
    position  relative
    float  left
    margin-left -10px
    box-sizing  border-box
    text-overflow ellipsis
    overflow hidden
    white-space nowrap
  .planninglist-remark1
    width 160px
    float  left
    color $cf-gray2
    line-height 16px
    padding-bottom: 10px;
    word-break: break-all;
  .more-btn
    color $c-main
    text-align center
    cursor pointer
</style>
